<template>
  <div class="fullMain">
    <x-header
      class="custumHeader"
      :left-options="{backText: '',showBack: false}">
      <a slot="left">
        <i slot="overwrite-left" class="lIcon">X</i>
      </a>
      <span>日报填写</span>
      <a slot="right">
        <x-icon slot="overwrite-right" type="ios-more" size="35" style="position:relative;top:-8px;left:-3px;"></x-icon>
      </a>
    </x-header>
    <div class="mainbBg">
      <div class="menuHeader">
        <i class="fa fa-chevron-left mT returnIcon" @click="back"></i>
        <span class="ids">
          姓名：张三
        </span>
      </div>
      <scroller lock-x scrollbar-y height="calc(100% - 60px)">
        <div class="reportDiv">
          <group>
            <calendar :readonly="readonly" v-model="selVal" :title="title" disable-past :placeholder="placeholder" @on-show="log('show')" @on-hide="log('hide')"></calendar>
          </group>
          <!--项目-->
          <div class="cellDiv">
            <button type="button" class="affirmBtn affirmBtn_small groupBBtn reportBtn" style="margin-right: 10px;">项目</button>
            <button type="button" class="affirmBtn affirmBtn_small groupBBtn reportBtn customBtn" style="margin-right: 10px;">学习</button>
            <button type="button" class="affirmBtn affirmBtn_small groupBBtn reportBtn customBtn" style="margin-right: 10px;">锻炼</button>
            <button type="button" class="affirmBtn affirmBtn_small groupBBtn reportBtn customBtn" style="margin-right: 10px;">其他</button>
            <i class="fa fa-clock-o" v-model="show" @click="showAlert"></i>
          </div>
          <div class="msgContent">
            <div class="msgBox">
              <div class="timeDiv">
                <span> 时间：</span>
                <div class="time">
                  <datetime
                    v-model="projectStartVal"
                    @on-change="change"
                    :title="projectStart"
                    @on-cancel="log('cancel')"
                    @on-confirm="onConfirm"
                    @on-hide="log('hide', $event)"></datetime>
                  <span>至</span>
                  <datetime
                    v-model="projectEndVal"
                    @on-change="change"
                    :title="projectEnd"
                    @on-cancel="log('cancel')"
                    @on-confirm="onConfirm"
                    @on-hide="log('hide', $event)"></datetime>
                </div>
              </div>
              <div class="customDiv">
                <x-input :show-clear="false" v-model="ztVal" title="主题："></x-input>
              </div>
              <div class="customDiv">

                <x-textarea v-model="ddVal" placeholder="点击输入内容" title="地点："></x-textarea>
              </div>
            </div>
          </div>
          <div class="picDiv">
            <div class="pic">
              <img src="/static/img/pic1.jpg">
              <i class="fa fa-times-rectangle closePic"></i>
            </div>
            <div class="pic">
              <img src="/static/img/pic2.jpg">
              <i class="fa fa-times-rectangle closePic"></i>
            </div>
            <div class="pic">
              <i class="fa fa-camera"></i>
            </div>
          </div>
          <!--添加-->
          <div class="addBox">
            <div class="addDiv">
              <i class="fa fa-plus"></i>
            </div>
          </div>
          <!--按钮-->
          <div class="displayFlex" style="padding: 60px">
            <button type="button" class="affirmBtn specialBtn" style="margin-right: 40px;">暂存</button>
            <button type="button" class="affirmBtn specialBtn">提交</button>
          </div>
          <div style="margin-bottom: 60px;"></div>
        </div>
      </scroller>
    </div>
    <!--弹出层-->
    <div v-transfer-dom>
      <alert v-model="show" @on-show="onShow" @on-hide="onHide" :button-text="'暂停'" :content="'sss'"></alert>
    </div>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import { Scroller } from 'vux'
  import { Group, Calendar,Datetime} from 'vux'
  import { XInput,XTextarea } from 'vux'
  import { Alert,TransferDomDirective as TransferDom  } from 'vux'
  export default {
    name: "Report2",
    directives: {
      TransferDom
    },
    data(){
      return{
        readonly: false,
        selVal:"",
        title:"日期选择：",
        placeholder:"选择日期",
        projectStart:"起",
        projectEnd:"止",
        projectStartVal:"",
        projectEndVal:"",
        ztVal:"",
        ddVal:"",
        learnStartVal:"",
        learnctEndVal:"",
        ztLearnVal:"",
        ddLearnVal:"",
        exercisectStartVal:"",
        exercisectEndVal:"",
        ztExerciseVal:"",
        ddExerciseVal:"",
        restsStartVal:"",
        restsEndVal:"",
        ztRestsVal:"",
        ddRestsVal:"",
        show: false,
      }
    },
    methods: {
      back(){
         this.$router.go(-1);
      },
      log (str) {
        console.log(str)
      },
      onChange (val) {
        console.log('on change', val)
      },
      change (value) {
        console.log('change', value)
      },
      onConfirm (val) {
        console.log('on-confirm arg', val)
        console.log('current value', this.value1)
      },
      setToday (value) {
        let now = new Date()
        let cmonth = now.getMonth() + 1
        let day = now.getDate()
        if (cmonth < 10) cmonth = '0' + cmonth
        if (day < 10) day = '0' + day
        this.value7 = now.getFullYear() + '-' + cmonth + '-' + day
        console.log('set today ok')
      },
      showAlert(){
        this.show = true;
      },
      onHide () {
        console.log('on hide')
      },
      onShow () {
        console.log('on show')
      },
    },
    components:{
      XHeader,
      Scroller,
      Group,
      Calendar,
      Datetime,
      XInput,
      XTextarea,
      Alert
    }
  }
</script>

<style>

</style>
